<template>
  <view>
    <view class="header">
      <view class="back" @click="back()">
        <uni-icons type="left" size="20" color="#fff"></uni-icons>
      </view>
      <text>修改信息</text>
    </view>
    <view class="changeInfo-box">
      <input focus class="inp" v-model="textInfo" placeholder="手机号" maxlength="11" />
      <input focus class='inp' v-model="oldPassword" placeholder="旧密码" maxlength="12" />
      <input class='inp' v-model="newPassword" placeholder="新密码" maxlength="12" />
      <input class='inp' v-model="okPassword" placeholder="确认密码" maxlength="12" />
      <button type="default" style="background-color: #b6eaae;color: #fff;" @click="changeInfo">确认</button>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        textInfo: '',
        oldPassword: '',
        newPassword: '',
        okPassword: ''
      };
    },
    onLoad() {},
    methods: {
      ...mapMutations('my_user', ['updateUserInfo']),
      async changeInfo() {
        if (!/^\d{11}$/.test(this.textInfo)) return uni.$showMsg('手机号格式不正确')
        if (this.oldPassword.trim() == '') return uni.$showMsg('旧密码不能为空！')
        if (this.newPassword.trim() == '') return uni.$showMsg('新密码不能为空！')
        if (this.okPassword.trim() == '') return uni.$showMsg('确认密码不能为空！')
        if (!/^\w{4,8}$/.test(this.newPassword)) return uni.$showMsg('密码格式错误！')
        if (this.okPassword !== this.newPassword) return uni.$showMsg('确认密码错误！')
        const userInfo = this.userInfo
        userInfo.phone = this.textInfo
        userInfo.password = this.okPassword
        const data = await uni.$http.post(
          `/users/users/update/${userInfo.studentId}`, {
            oldPassword: this.oldPassword,
            newPassword: this.newPassword,
            phone: this.textInfo
          })
        console.log(data);
        this.updateUserInfo(userInfo)
        uni.navigateBack()
      },
      back() {
        uni.navigateBack()
      }
    },
    computed: {
      ...mapState('my_user', ['userInfo', 'token']),
    }
  }
</script>

<style lang="scss">
  .header {
    position: relative;
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color: #b6edaa;
    color: #fff;

    .back {
      position: absolute;
      top: 4rpx;
      left: 23rpx;
      height: 50rpx;
    }
  }

  .changeInfo-box {
    display: flex;
    flex-direction: column;
    justify-content: top;
    height: 1200rpx;

    .inp {
      margin-top: 30rpx;
      height: 100rpx;
      border-bottom: 1px solid #aaa;
      padding-left: 1em;
    }

    button {
      width: 80%;
      margin-top: 600rpx;
    }
  }
</style>